<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/application/multimedia.css">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/magnific-popup.css">
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery.magnific-popup.js"></script>

<div class="page-title">
	<div class="wrapper">
		<h1>DANH SÁCH CÁC VIDEO THAM KHẢO &nbsp; <span class="glyphicon glyphicon-play-circle"></span></h1>
	</div>
</div> <br>

<div class="filters">
	<div class="wrapper">
		<div class="panel panel-info">
			<div class="panel-heading">
				Bộ lọc
			</div>
			<div class="panel-body">
				<label for="">Tìm theo tên</label>
				<input type="text" class="form-control" ng-model="videoName">

				<label for="">Chọn thời kỳ lịch sử: </label> &nbsp; 
				<input type="checkbox" value="1" ng-model="catFilter">
				<br>
				<input type="radio" name="region" ng-model="region" value="vn" ng-disabled="!catFilter"> Việt Nam &nbsp; - &nbsp;
				<input type="radio" name="region" ng-model="region" value="tg" ng-disabled="!catFilter"> Thế giới 


				<select class="category form-control" ng-model="catId" ng-disabled="!catFilter">
					<option ng-repeat="cat in categories | catFilter:region" value="{{cat._id}}">{{cat.name}}</option>
				</select> <br />
			</div>
		</div>
	</div>
</div>

<div class="wrapper">
	<ul class="video-list">
		<li ng-repeat="video in videosList 
			| simpleFilter:videoName:filterType 
			| categoryFilter:catId
			| vnSort:'description'">
			<a class="youtube-popup" href="http://www.youtube.com/watch?v={{video._id}}">
				<img class="thumbnail" src="http://img.youtube.com/vi/{{video._id}}/hqdefault.jpg" 
				width="160" height="120" alt="">
			</a>
			<div class="info">
				<p class="name">{{video.description}}</p>
			</div>
		</li>
	</ul>
</div>